<template>
  <tl-sub-page :render="render" :visible.sync="visible" v-dialogDrag :title="moduleTitle" :close-on-click-modal="false" class="tl-dialog" width="600px" @open="open" @close="close">
    <el-row>
      <el-col :span="24">
        <el-button type="danger" style="float: right" size="small" icon="el-icon-close" circle @click="doCancelEdit"></el-button>
      </el-col>
    </el-row>
    <br />
    <el-form class="tl-form" ref="form" :model="model" :rules="rules" label-width="150px" disabled>
      <el-row>
        <el-col :span="12">
          <el-form-item label="任务名称" prop="taskname">
            <el-input v-model="model.taskname" type="text"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目名称" prop="projectname">
            <el-input v-model="model.projectname" type="text"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="任务内容" prop="taskdetail">
            <el-input v-model="model.taskdetail" type="textarea" :autosize="{ minRows:1, maxRows:3 }" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="更新内容" prop="taskfeedbackdetail" :rules="rules.validateRequire">
            <el-input v-model="model.taskfeedbackdetail" type="textarea" :rows="4" maxlength="1000"> </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="任务进度" prop="taskschedule" :rules="rules.validateRequire"> <el-input-number v-model="model.taskschedule" controls-position="right" :step="1" :min="0" :max="100" style="width:93%"></el-input-number><span>%</span> </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务风险" prop="taskrisk" >
            <el-select v-model="model.taskrisk" :class="taskRiskClassName" clearable>
              <el-option v-for="item in codeModel.taskriskList" :key="item.code" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="model.havenamelist !== null && model.havenamelist !== undefined && model.havenamelist !== ''">
          <el-form-item label="是否获取决策链名单" prop="havenamelist">
            <el-select v-model="model.havenamelist">
              <el-option v-for="item in codeModel.enabledList" :key="item.code" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="model.guoscore !== null && model.guoscore !== undefined && model.guoscore !== ''">
          <el-form-item label="供应商绩效评价得分" prop="guoscore">
            <el-input v-model="model.guoscore"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="model.guorank !== null && model.guorank !== undefined && model.guorank !== ''">
          <el-form-item label="供应商绩效评价排名" prop="guorank">
            <el-input v-model="model.guorank"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="model.guoposition !== null && model.guoposition !== undefined && model.guoposition !== ''">
          <el-form-item label="供应商绩效评价档位" prop="guoposition">
            <el-input v-model="model.guoposition"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="23" v-if="model.reviewmeetingdocument !== null && model.reviewmeetingdocument !== undefined && model.reviewmeetingdocument !== ''">
          <el-form-item label="已获取审查会文件内容" prop="documentDetail"  label-width="160px">
            <el-select v-model="documentDetail" placeholder="请选择" filterable multiple clearable>
              <el-option v-for="item in codeModel.reviewmeetingdocumentList" :key="item.code" :label="item.name" :value="item.code"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="1" v-if="model.reviewmeetname !== null && model.reviewmeetname !== undefined && model.reviewmeetname !== ''">
          <el-tooltip content="要求必须获取资格要求、技术规范、分标分包、限价、评分细则。" placement="top" style="font-size:20px; margin-top:4px; margin-left: 5px">
            <i class="el-icon-info" style="color: #909399"/>
          </el-tooltip>
        </el-col>
        <el-col :span="12" v-if="model.reviewmeetname !== null && model.reviewmeetname !== undefined && model.reviewmeetname !== ''">
          <el-form-item label="是否已获取审查会决策链名单" prop="reviewmeetname" label-width="200px">
            <el-select v-model="model.reviewmeetname">
              <el-option v-for="item in codeModel.enabledList" :key="item.code" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="model.nankeepscore !== null && model.nankeepscore !== undefined && model.nankeepscore !== ''">
          <el-form-item label="履约评价得分" prop="nankeepscore" :rules="isFinish ? rules.validateRequire : []">
            <el-input v-model="model.nankeepscore"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="model.nankeeprank !== null && model.nankeeprank !== undefined && model.nankeeprank !== ''">
          <el-form-item label="履约评价排名" prop="nankeeprank" :rules="isFinish ? rules.validateRequire : []">
            <el-input v-model="model.nankeeprank"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="model.nanmovescore !== null && model.nanmovescore !== undefined && model.nanmovescore !== ''">
          <el-form-item label="运行评价得分" prop="nanmovescore" :rules="isFinish ? rules.validateRequire : []">
            <el-input v-model="model.nanmovescore"/>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="model.nanmoverank !== null && model.nanmoverank !== undefined && model.nanmoverank !== ''">
          <el-form-item label="运行评价排名" prop="nanmoverank" :rules="isFinish ? rules.validateRequire : []">
            <el-input v-model="model.nanmoverank"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实际完成日期" prop="taskactualenddate">
            <el-date-picker v-model="model.taskactualenddate" type="date" value-format="yyyy-MM-dd"> </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务是否完成" prop="istaskcomplete">
            <el-select v-model="model.istaskcomplete">
              <el-option v-for="item in codeModel.istaskcompleteList" :key="item.code" :label="item.name" :value="item.code"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="更新人姓名" prop="username">
            <el-input v-model="model.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="更新人工号" prop="usercode">
            <el-input v-model="model.usercode"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="计划开始日期" prop="planstartdate">
            <el-date-picker v-model="model.planstartdate" type="date" placeholder="例：2021-01-01" value-format="yyyy-MM-dd" :disabled="true"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计划完成日期" prop="planenddate">
            <el-date-picker v-model="model.planenddate" type="date" placeholder="例：2021-01-01" value-format="yyyy-MM-dd" :disabled="true"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务派发日期" prop="taskdistributedate">
            <el-date-picker v-model="model.taskdistributedate" type="date" placeholder="例：2021-01-01" value-format="yyyy-MM-dd" :disabled="true"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="model.customerattach">
        <el-col :span="24">
          <el-form-item label="客户接触现状" prop="customerattach" >
            <el-input v-model="model.customerattach" type="textarea"  :autosize="{ minRows:1, maxRows:3 }" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="model.improveplan">
        <el-col :span="24">
          <el-form-item label="客户关系改善计划" prop="improveplan">
            <el-input v-model="model.improveplan" type="textarea" :autosize="{ minRows:1, maxRows:3 }" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <tl-approval-history ref="history" sourceType="MpmProjectTaskFeedback" :sourceId="model.id" />
    <div slot="footer" class="dialog-footer">
      <tl-attachment sourceType="MpmProjectTaskFeedback" :sourceId="model.id" :disabled="disableAttachment" :editable="stateEdit"></tl-attachment>
      <el-button type="primary" @click="$refs.history.visible = true" :disabled="disableApprovalHistory"> <svg-icon icon-class="list" />审批历史 </el-button>
    </div>
  </tl-sub-page>
</template>

<script>
/** mixins */
import { mixin_approval_edit } from '@tapui/mixins/mixin_approval_edit'
/** 子组件 */
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
import { validateNull } from '@tapui/utils/validate'
/** VUE配置 */
export default {
  mixins: [mixin_approval_edit],
  components: {},
  data() {
    return {
      moduleTitle: '任务反馈审批',
      urlPrefix: '/mpm/projectTaskFeedback/',
      url: {
        // 额外的url
        queryProject: '/mpm/project/list'
      },
      isFinish: false,
      riskClassNames: ["low-level", "middle-level", "high-level"],
      documentDetail: []
    }
  },
  computed: {
    taskRiskClassName() {
      return this.model.taskrisk ? this.riskClassNames[Number.parseInt(this.model.taskrisk)] : ""
    }
  },
  methods: {
    doCancelEdit() {
      this.visible = false
      this.$emit('close')
      this.$emit('refresh')
    },
    async loaded() {
      validateNull(this.model.reviewmeetingdocument) ? this.$set(this, 'documentDetail', []) : this.$set(this, 'documentDetail', this.model.reviewmeetingdocument.split(','))
      // 页面加载完毕执行
      // 查询项目
      await getAction(this.url.queryProject, { qry_projectcode: this.model.projectcode })
        .then((res) => {
          if (res.success) {
            this.$set(this.model, 'projectname', res.result.dataList[0].projectname)
          } else {
            this.$tap.alert(res.message, 'warning')
          }
        })
        .catch((err) => {
          this.$tap.alert(err.message, 'warning')
        })
    }
  }
}
</script>
<style lang="scss" scoped>

$riskLevels: high-level, middle-level, low-level;
$riskColors: #ff6363, #ffe119, #bfef45;
//for 循环 根据风险中高 匹配颜色和字体样式
@for $i from 1 through 3 {
  .#{nth($riskLevels,$i)} /deep/ .el-input__inner {
    background-color: nth($riskColors, $i) !important;
    color: rgba(27, 27, 27, 0.5) !important;
    font-weight: 600;
  }
}
</style>
